<template>
    <div class="singer">
        <list-view :data="singerList" @select="selectSinger"></list-view>
        <router-view></router-view>
    </div>
</template>
<script>
import {getSingerList} from 'api/singer'
import {ERR_OK} from 'api/config'
import Singer from 'common/js/singer'
import ListView from 'base/listview/listview'
import { mapMutations } from 'vuex'
const HOT_NAME = '热门'
const HOT_SINGER_LEN = 10
export default {
    data () {
        return {
            singerList :[]
        }
    },
    created() {
        this._getSingerList()
    },
    components :{
        ListView
    },
    methods:{
        selectSinger(singer) {
            this.$router.push({
                path: '/singer/'+singer.id
            })
            this.setSinger(singer)
      },
        _getSingerList () {
            getSingerList().then((res) => {
                if(res.code === ERR_OK) {
                    this.singerList = this._normalLizeSinger(res.data.list)
                }
            })
        },
        _normalLizeSinger(list) {
            let map = {
                //热门数据
                hotdata:{
                    title :HOT_NAME,
                    items :[]
                }
            }
            list.forEach((item,index) => {
                if(index < HOT_SINGER_LEN) {
                    map.hotdata.items.push(new Singer({
                        name :item.Fsinger_name,
                        id :item.Fsinger_mid
                    }))
                }
                //聚合数据
                const key = item.Findex
                if(!map[key]) {
                    map[key] = {
                        title :key,
                        items :[]
                    }
                }
                map[key].items.push(new Singer({
                    name :item.Fsinger_name,
                    id :item.Fsinger_mid
                }))
            })
            //有序列表
            let hot = []
            let ret = []
            for (let key in map) {
                let val = map[key]
                if (val.title.match(/[a-zA-Z]/)) {
                    ret.push(val)
                }else if(val.title === HOT_NAME) {
                    hot.push(val)
                }
            }
            ret.sort((a,b) => {
                return a.title.charCodeAt(0) - b.title.charCodeAt(0)
            })
            return hot.concat(ret)
        },
    ...mapMutations({// 将 `this.setSinger()` 映射为 `this.$store.commit('SET_SINGER')`
      setSinger: 'SET_SINGER'
       })
    }
}
</script>
<style lang="stylus" scoped>
    .swiper
        position :fixed
        top :88px
        bottom :0
        width :100%
</style>
